{extend name="common/base" /}

{block name="style"}
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">
{/block}
{block name="body"}
<div class="jzzf-mains">
    <div class="swiper-container con-top">
        <div class="swiper-wrapper">  
            <!-- Slides -->
            {foreach $banner_list as $vo }
            <div class="swiper-slide">
                {if ($vo['jump_type']==1)}
                <a href="{$vo.ad_link}">
                    {/if}
                    <img src="__OSSCDN__{$vo.ad_img}" />
                    {if ($vo['jump_type']==1)}
                </a>
                {/if}
            </div>
            {/foreach}                                    
        </div>  

    </div>
    <div class="jzzf-dfk">
        <div class="jz-df-div">待付款（元）</div>
        <div class="jz-df-div2">{$order_info.real_price}</div>
        <div class="jz-df-div3">剩余支付时间:<span class="result-time">00:00:00</span></div>
    </div>
    <div class="jzzf-hs"></div> 
    <ul class="jzzf-list">
        <li class="li1">选择付款方式</li>
        <li class="li2">
            <img src="__CDN__/html/img/hz-img8.png" class="li2-img">
            <span class="li2-span">微信支付</span>
            <img src="__CDN__/html/img/hz-img15.png" class="li2-img2 js-wx-pay js-wx-no-sel"  data-type="1" style="display:none;">
            <img src="__CDN__/html/img/hz-img12.png" class="li2-img2 js-wx-pay" data-type="0" >
        </li>

        {neq name="type" value="2"}
        <li class="li2">
            <img src="__CDN__/html/img/hz-img14.png" class="li2-img">
            <span class="li2-span">余额支付（当前余额{$wallet.balance}元）</span>
            <img src="__CDN__/html/img/hz-img15.png" class="li2-img2 js-ye js-ye-no-sel" data-type="2">
            <img src="__CDN__/html/img/hz-img12.png" class="li2-img2 js-ye"  data-type="0" style="display:none;">
        </li> 
        {/neq}

    </ul> 

    <input type="hidden" class="js-end-time" value="{$order_end_time}">
    <input type="hidden" class="js-is-end-time" value="{$is_end_time}">
    <div class="jzzf-but">
        <input type="hidden" class="js-pay-type" value="1">
        <input type="hidden" class="js-order-no" value="{$order_info.order_no}">
        <div class="but-div js-to-pay">确认支付</div>
    </div>       
</div>
{/block}
{block name="script"}
<script src="__CDN__/html/js/swiper.js"></script>

<script>
    $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000
    });
    $(function () {
        var is_end_time = $('.js-is-end-time').val();

        if (is_end_time > 0) {
            show_time();
        }

    });

    // 剩余秒数
    var end_second = $('.js-is-end-time').val();
    function show_time() {
        var order_end = $('.js-end-time').val();

        var time_start = new Date().getTime(); //设定当前时间

        var time_end = new Date(order_end).getTime(); //设定目标时间
        // 计算时间差 
        var time_distance = time_end - time_start;
        // 时
        var int_hour = Math.floor(time_distance / 3600000);
        time_distance -= int_hour * 3600000;
        // 分
        var int_minute = Math.floor(time_distance / 60000);
        time_distance -= int_minute * 60000;
        // 秒 
        var int_second = Math.floor(time_distance / 1000);
        // 时分秒为单数时、前面加零 


        if (int_hour < 10) {
            int_hour = "0" + int_hour;
        }
        if (int_minute < 10) {
            int_minute = "0" + int_minute;
        }
        if (int_second < 10) {
            int_second = "0" + int_second;
        }

        end_second--;
        $('.result-time').html(int_hour + ":" + int_minute + ":" + int_second);

        if (end_second > 0) {
            setTimeout("show_time()", 1000);
        }

    }
    $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000
    });

    $('.js-wx-pay').on('click', function () {
        var type = $(this).attr('data-type');
        $('.li2-img2').hide();
        $('.js-ye-no-sel').show();
        $('.js-wx-pay').show();
        $(this).hide();
        $('.js-pay-type').val(type);
    });

    $('.js-ye').on('click', function () {
        var type = $(this).attr('data-type');
        $('.li2-img2').hide();
        $('.js-wx-no-sel').show();
        $('.js-ye').show();
        $(this).hide();
        $('.js-pay-type').val(type);
    });

    $('.js-to-pay').on('click', function () {
        var type = $('.js-pay-type').val();
        var order_no = $('.js-order-no').val();
        if (type == 0) {
            mui.alert('请选择支付方式');
        }

        $.post("{:url('toPay')}", {type: type, out_trade_no: order_no}, function (res) {
            if (res.code == 1) {
                location.href = res.data.url;
            } else {
                mui.alert(res.msg);
            }
        }, 'json');

    });
</script>
{/block}